<!--上次预约-->
<template>
    <div class="last-appoint">
        <div class="appoint-top">
            <table class="table-common">
                <thead>
                <tr>
                    <th>接种者姓名</th>
                    <th>出生日期</th>
                    <th>性别</th>
                    <th>年龄</th>
                    <th>接种证号</th>
                    <th></th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>{{peopleInfo.name}}</td>
                    <td>{{peopleInfo.birthday}}</td>
                    <td>
                        <span v-if="peopleInfo.sex==true">女</span>
                        <span v-else>男</span>
                    </td>
                    <td>{{peopleInfo.realage}}</td>
                    <td>{{peopleInfo.serialnum?peopleInfo.serialnum:'-'}}</td>
                    <td>
                        <a @click="goInoculateHistory">
                            <span class="history-text">接种历史</span>
                            <img src="../../../static/images/right-arrow.png" class="right-arrow">
                        </a>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>

        <p class="title-cen">上次预约列表</p>

        <div class="list-data">
            <div class="condition">
                <span class="label">接种类型</span>
                <Select v-model="formCustom.inoculatetype" class="common-select" style="width:260px">
                    <Option v-for="item in inoculateType" :value="item.value" :key="item.value">{{ item.label }}</Option>
                </Select>
            </div>

            <div class="table-vaccine">
                <div class="table-con">
                    <table>
                        <thead>
                        <tr>
                            <th>选择</th>
                            <th>疫苗名称（一类）</th>
                            <th>预约剂次/总剂次</th>
                            <th>预约时间</th>
                            <th>选择厂商</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="(item,index) in lastlist" :key="index">
                            <td>
                                <label class="check_label check_label-item ">
                                    <input type="checkbox" class=" publish_accredit-dot" disabled  ref="checkbox"  @click="secondVaccineChange(item,index)" />
                                    <span class="publish_accredit-dot-mark "></span>
                                </label>
                            </td>
                            <td>{{item.vaccinename}}--{{item.id}}</td>
                            <td>{{item.dose}}/{{item.totaldose}}</td>
                            <td>{{item.time}}</td>
                            <td>
                                <Button type="primary" @click="selectVenor(item,index)"  ref="isChooseBtn">选择</Button>
                                <input type="hidden" value="" ref="vaccineid" class="vaccineid">
                                <input type="hidden" :value="item.id" ref="planids"  class="planids">
                            </td>
                            <td>
                                <Dropdown>
                                    <a href="javascript:void(0)">
                                        操作
                                        <Icon type="ios-arrow-down"></Icon>
                                    </a>
                                    <DropdownMenu slot="list">
                                        <DropdownItem @click.native="entry(item)">录入</DropdownItem>
                                        <DropdownItem @click.native="refuse(item,1)">拒种</DropdownItem>
                                        <DropdownItem @click.native="refuse(item,2)">禁忌</DropdownItem>
                                        <DropdownItem @click.native="refuse(item,3)">超期</DropdownItem>
                                        <DropdownItem @click.native="refuse(item,4)">替代</DropdownItem>
                                        <DropdownItem @click.native="refuse(item,5)">已患</DropdownItem>
                                        <DropdownItem @click.native="delect(item)">删除</DropdownItem>
                                    </DropdownMenu>
                                </Dropdown>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>


        </div>

        <div class="bottom-btn">
            <Button class="submit-btn" @click="submitSave" :loading="loadingSubmit">保存</Button>
            <Button class="cancel-btn">取 消</Button>
        </div>

        <!--选择厂商-->
        <lastppoint-vendor :vendorList="vendorList"
                           :visible.sync="vendorVisible" @lastVendor="lastVendor"></lastppoint-vendor>


        <!--录入-->
        <last-appoint-entry  :visible.sync="entryVisible" :entryInfo="entryInfo"  :babytype="0"></last-appoint-entry>


    </div>
</template>

<script>
    import {peoplePlanbaby,vaccineVendor,refuseino,saveCommon,cancellastapp} from '@/api/inoculate/inoculate';
    import LastppointVendor from "./components/lastppointVendor";
    import lastAppointEntry from "./components/lastAppointEntry";
    import $ from 'jquery';

    export default {
        components: {
            LastppointVendor,
            lastAppointEntry
        },
        data(){
            return {
                inoculateType: [
                    {
                        value: 1,
                        label: '常规接种'
                    },
                    {
                        value: 2,
                        label: '强化接种'
                    },
                    {
                        value: 3,
                        label: '查漏补种'
                    },
                    {
                        value: 4,
                        label: '应急接种'
                    }
                ],
                peopleInfo: {},
                lastlist: [],

                vendorList: [],
                vendorVisible: false,

                entryVisible: false,
                entryInfo: {},

                selectVendorIndex: null,


                formCustom: {
                    peopleid: null,
                    size: null,
                    id: null,
                    inoculatetype: 1,
                    babytype: 0  // 儿童类型，儿童传0成人传1
                },
                loadingSubmit: false,
                vaccineidArray: [],
                planidArray: []
            }
        },
        computed:{
            turnId(){
                return this.$route.query.turnId;
            },
            peopleid(){
                return this.$route.query.peopleid;
            }
        },
        watch: {
            entryVisible(newVal,oldVal){
                if(newVal!==oldVal && newVal==false){
                    peoplePlanbaby({
                        id: this.turnId,
                        peopleid: this.peopleid,
                        vaccineType: 0
                    }).then((resPeople) => {
                        if (resPeople.data.error == 0) {
                            if(resPeople.data.lastlist.length==0){
                                // 本次推荐
                                this.$router.push({path: '/home/theAppoint',query:{turnId: this.turnId,peopleid: this.peopleid}});
                            }else{
                                // 进入上次预约
                                this.peopleInfo=resPeople.data.people;
                                this.lastlist=resPeople.data.lastlist;
                            }
                        }
                    });
                }
            }
        },
        mounted(){
            this.getData();
        },
        methods:{
            getData(){
                peoplePlanbaby({
                    id: this.turnId,
                    peopleid: this.peopleid,
                    vaccineType: 1
                }).then((res) => {
                    if(res.data.error==0){
                        this.peopleInfo=res.data.people;
                        this.lastlist=res.data.lastlist;
                    }else{
                        this.$Message.error(res.data.message);
                    }
                })
            },
            selectVenor(val,index){
                this.selectVendorIndex=index;
                vaccineVendor({
                    vaccinecoding: val.vaccinecoding,
                    type: 0
                }).then((res) => {
                    if(res.data.error==0){
                        this.vendorList=res.data.vaccinelist;
                        this.vendorVisible=true;
                    }
                });
            },
            lastVendor (val) {
                this.$refs.vaccineid[this.selectVendorIndex].defaultValue = val.id;
                this.$refs.checkbox[this.selectVendorIndex].checked = true;
                this.$refs.checkbox[this.selectVendorIndex].disabled = false;
                this.$refs.isChooseBtn[this.selectVendorIndex].$el.innerText = '已选择';
            },
            //  录入
            entry (val) {
                this.entryVisible = true;
                this.entryInfo = val;
            },
            //  拒种 等
            refuse (val, status) {
                refuseino({
                    peopleid: this.peopleInfo.id,
                    planid: val.id,
                    type: status
                }).then((res) => {
                    if(res.data.error==0){
                        peoplePlanbaby({
                            id: this.turnId,
                            peopleid: this.peopleid,
                            vaccineType: 0
                        }).then((resPeople) => {
                            if (resPeople.data.error == 0) {
                                if(resPeople.data.lastlist.length==0){
                                    // 本次推荐
                                    this.$router.push({path: '/home/theAppoint',query:{turnId: this.turnId,peopleid: this.peopleid}});
                                }else{
                                    // 进入上次预约
                                    this.peopleInfo=resPeople.data.people;
                                    this.lastlist=resPeople.data.lastlist;
                                }
                            }
                        });
                    }else{
                        this.$Message.error(res.data.message);
                    }
                })
            },
            // 接种历史
            goInoculateHistory () {
                this.$router.push({path: '/home/inoculateHistory', query: {peopleid: this.peopleid, babyTypes: 0}});
            },
            secondVaccineChange(item,index){
                if (this.$refs.checkbox[index].checked == false) {   // 取消选中
                    this.$refs.checkbox[index].disabled = true;
                    this.$refs.vaccineid[index].defaultValue = '';
                    this.$refs.isChooseBtn[index].$el.innerText = '选择';
                } else {

                }
            },
            submitSave () {
                let that=this;
                this.formCustom.peopleid=Number(this.peopleid);
                this.formCustom.id=Number(this.turnId)

                var vaccineidArray=[];
                var planidArray= [];
                for(var i=0;i<this.$refs.checkbox.length;i++){
                    if(this.$refs.checkbox[i].checked == true){
                        vaccineidArray.push(this.$refs.vaccineid[i].defaultValue);
                        planidArray.push(this.$refs.planids[i].defaultValue);
                    }
                }

                this.formCustom.size=vaccineidArray.length;

                for(var i=1;i<vaccineidArray.length+1;i++){
                    this.formCustom['vaccineid'+i]=vaccineidArray[i-1];
                }
                for(var i=1;i<planidArray.length+1;i++){
                    this.formCustom['planid'+i]=planidArray[i-1];
                }

                let form =Object.assign(this.formCustom);
                saveCommon(form).then((res)=>{
                    this.loadingSubmit=false;
                    if(res.data.error==0){
                        that.$Message.success({
                            content: res.data.message,
                            duration: 1,
                            onClose: function () {
                                that.$router.push({path: 'registeredprocess'});
                            }
                        });
                    }else{
                        this.$Message.error(res.data.message);
                    }
                })

            },
            delect(val){
                cancellastapp({
                    id: val.napid
                }).then((res) => {
                    if(res.data.error==0){
                        peoplePlanbaby({
                            id: this.turnId,
                            peopleid: this.peopleid,
                            vaccineType: 0
                        }).then((resPeople) => {
                            if (resPeople.data.error == 0) {
                                if(resPeople.data.lastlist.length==0){
                                    // 本次推荐
                                    this.$router.push({path: '/home/theAppoint',query:{turnId: this.turnId,peopleid: this.peopleid}});
                                }else{
                                    // 进入上次预约
                                    this.peopleInfo=resPeople.data.people;
                                    this.lastlist=resPeople.data.lastlist;
                                }
                            }
                        });
                    }else{
                        this.$Message.error(res.data.message);
                    }
                })
            }
        }
    }
</script>

<style lang="less">
    .last-appoint{
        .appoint-top{
            background: #fff;
            padding:20px 10px;
            .right-arrow{
                width:12px;
                height: 12px;
            }
            .history-text{
                color:#EF7575;
                margin-right: 8px;
                cursor: pointer;
            }
        }
        .title-cen{
            font-size:14px;
            color:rgba(53,76,107,1);
            margin:18px 0 7px;
        }
        .list-data{
            background: #fff;
            padding:20px 10px;
            .condition{
                border-bottom: 1px dashed #D2D2D2;
                .label{
                    font-size: 14px;
                }
            }
        }
        .table-vaccine{
            margin-top:30px;
            .table-con{
                table{
                    width:100%;
                    text-align: center;
                    font-size: 14px;
                    border-collapse:collapse;
                    thead{
                        height:38px;
                        background:rgba(93,140,254,1);
                        font-size:14px;
                        font-family:PingFang-SC-Bold;
                        font-weight:bold;
                        color:rgba(255,255,255,1);
                        tr{
                            height:38px;
                            line-height: 38px;
                        }
                    }
                    tbody{
                        tr{
                            background:rgba(245,250,255,1);
                            td{
                                padding:15px 0;
                            }
                        }
                    }
                }
                .table-btn{
                    display: flex;
                    margin-top:10px;
                    .choose-vendor{
                        flex: 1;
                        background:rgba(93,140,254,1);
                        border-radius:6px;
                        color:rgba(255,255,255,1);
                        margin-right:12px;
                        font-size: 14px;
                    }
                    .btns{
                        .ivu-btn{
                            width:80px;
                            height: 38px;
                            background: #fff;
                            border:1px solid #5D8CFE;
                            color:#5D8CFE;
                            font-size: 14px;
                        }
                    }
                }
            }
        }
        .bottom-btn{
            margin-top:30px;
            text-align: center;
            .submit-btn{
                width:159px;
                height:48px;
                background:rgba(93,140,254,1);
                border-radius:6px;
                color: #ffffff;
                font-size: 14px;
                margin-right: 40px;
            }
            .cancel-btn{
                width:119px;
                height:48px;
                background:rgba(209,217,238,1);
                border-radius:6px;
                color:rgba(255,255,255,1);
                font-size: 14px;
            }
        }
    }
</style>
